<template>
  <div :style="{borderImageSource:'url('+wrapServerName(mcBorderImageSource)+')',borderImageSlice:borderImageSlice(),borderWidth:borderWidth()}" class="mc-border">
    <div class="mc-border-inner"
         :style="{padding:mcPadding,left:-1*mcBorderWidthLeft+'px',top:-1*mcBorderWidthTop+'px',right:-1*mcBorderWidthRight+'px',bottom:-1*mcBorderWidthBottom+'px'}">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'mc-border',
  data () {
    return {
    }
  },
  props: ['mcBorderImageSource',
    'mcBorderImageSliceTop','mcBorderImageSliceRight','mcBorderImageSliceBottom','mcBorderImageSliceLeft',
    'mcBorderWidthTop','mcBorderWidthRight','mcBorderWidthBottom','mcBorderWidthLeft',
    'mcPadding'],
  mounted () {
    if(window.iframeUi&&window.iframeUi.jsonFactory){
      var dragMcPane = window.iframeUi.jsonFactory.api().pubGetDragMcPaneName();
      var domElm = $(this.$el);
      var inner = domElm.find(".mc-border-inner");
      if(inner.length>0){//elementui 你为啥开始不创建这个结构烦死
        domElm.removeClass(dragMcPane);
        inner.addClass(dragMcPane);
      }
    }
  },
  watch:{

  },
  methods:{
    borderImageSlice(){
      return this.mcBorderImageSliceTop+" "+this.mcBorderImageSliceRight+" "+this.mcBorderImageSliceBottom+" "+this.mcBorderImageSliceLeft;
    },
      borderWidth(){
      return this.mcBorderWidthTop+"px "+this.mcBorderWidthRight+"px "+this.mcBorderWidthBottom+"px "+this.mcBorderWidthLeft+"px";
    },
    wrapServerName(url){
      if(!url){
        return "";
      }
      return this.$magicaltool.request.util.wrapServerName(url,true)
    },
  },

}
</script>

<style lang="scss">
  .mc-border{
      position: relative;
      box-sizing: border-box;
      border: 2px solid red;
      border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
      position: relative;
      .mc-border-inner{
          position: absolute;
          padding: 2px;
      }
  }
</style>
